<template>
  <div>
    <child v-model="a" :value="b" @b="bFun"></child>
    <childSelect v-model="checkData" :list="list"></childSelect>
     <a-input-number  :min="1" :max="10" @hover="hover" />
    <iframe src="http://localhost:8081/#/" width="100%" height="100%"></iframe>
    <a-button id="parent" @click="parentClick">父组件点击</a-button>
    <!-- <a-popover
      overlayClassName= 'top'
      title="Title"
      placement="right"
    >
      <template slot="content">
        <p>Content</p>
        <p>Content</p>
      </template>
      <a-button type="primary">
        Hover me
      </a-button>
    </a-popover>

    <a-tooltip :overlayClassName="top">
      <template slot="title">
        prompt text
      </template>
      Tooltip will show when mouse enter.
    </a-tooltip> -->
    <!-- <a-row>
      <a-col :span="8" style="background:rgb(230,244,247)"> 11111</a-col>
      <a-col :span="8" style="background:rgb(230,244,247)"> 11111</a-col>
      <a-col :span="8" style="background:rgb(230,244,247)"> 11111</a-col>
      <a-col :span="8" style="background:rgb(230,244,247)"> 11111</a-col>
      <a-row :span="8" style="background:rgb(230,244,247)"> 11111</a-row>
      <a-row style="background:red">
        <a-col :span="24" >1111111</a-col>
      </a-row>
    </a-row> -->
    <!-- <h1 class="color">{{ checkData }}</h1>
        <p>{{list}}</p>
    <h1 class="color">{{ a }}</h1>
    <h1 class="color">{{ b }}</h1>
    <button @click="goBack()">上一页</button>

    <router-link to="/hw/1">上一页</router-link>

    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{
        city
      }}</el-checkbox>
    </el-checkbox-group>
    <div>{{ $store.state.count }}</div>
    <div>{{ $store.state.count1 }}</div>
    <button @click="changeState">改变state</button> -->
    <!-- <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" @change=""></el-switch> -->
  </div>
</template>

<script>
import { getHead } from "@/api/textReq";
import child from "@/components/child";
import childSelect from "@/components/childSelect";
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  components: { child, childSelect },
  data() {
    return {
      // top:"top",
      checkData: {
        id: 11,
        name: "aaa",
        vale: "aaaa",
      },
      list: [
        {
          id: 11,
          name: "aaa",
          vale: "aaaa",
        },
        {
          id: 21,
          name: "bbb",
          vale: "bbb",
        },
        {
          id: 31,
          name: "ccc",
          vale: "ccc",
        },
      ],

      a: 1,
      b: 2,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,

      arrayList : {
        name: '1', children: [{
          name: '2', children: [{
            name: '3', children: [{
              name: '4', children: []
            }]
          }]
        }]
      }

    };
  },
  // store,
  created() {
    // this.router();
    // this.getHead();
    this.getResult();
    this.deep(this.arrayList)
    console.log('this.deep(this.arrayList)',this.deep(this.arrayList))
  },
  watch: {
    $route(to, from) {
      console.log(to);
      console.log(from);
    },
  },
  methods: {
    deep(val) {
      if (val.children.length == 0) {
        val.children == null
      } else {
        for (var i = 0; i < val.children.length; i++) {
          this.deep(val.children[i])
        }
      }
      return val
    },
    getA() {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(2);
        }, 1000);
      });
    },
    bFun(data) {
      console.log(data);
      this.b = data;
    },
    aaahover() {
      console.log("1");
    },

    getB(a) {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(a + 3);
        }, 1000);
      });
    },

    addAB(a, b) {
      return a + b;
    },

    getResult() {
      var obj = {};

      this.getA()
        .then((a) => {
          console.log("a", a);
          obj.a = a;
          return this.getB(a);
        })
        .then((b) => {
          console.log("b", b);
          obj.b = b;
          return obj;
        })
        .then((obj) => {
          return this.addAB(obj["a"], obj["b"]);
        })
        .then((data) => {
          console.log("+++++++++", data);
        })
        .catch((e) => console.log(e));
    },

    getHead() {
      var params = {
        pageNum: 0,
        pageSize: 10,
      };
      getHead(params).then((res) => {
        console.log(res);
      });
    },

    router() {
      console.log(this.$route);
      console.log(this.$router);
      console.log(window.history);
      console.log("----------------", this.$store.state);
    },
    goBack() {
      // window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    handleCheckedCitiesChange() {},
    changeState() {
      this.$store.commit("incre", 1);
    },
    parentClick(){
      console.log(document.getElementById('parent').click())
      console.log('aaaaaaaa')
    }
  },
};
</script>
<style lang="less" scoped>
@color: red;
.color {
  color: @color;
}
.top {
  // position: fixed;
  // top: 0;
  // right: 0;
  color: @color;
  background: red !important;
}
</style>